<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="style.css" />
    <script src="vue.js"></script>
  </head>
  <body onload="draw()">
    <div id="vue-app"></div>
    <canvas id="canvas" width="400" height="300">
      你这浏览器不支持这玩意啊
    </canvas>
    <script src="app.js"></script>
    <script>
      function draw() {
        // 让vscode可以显示canvas智能提示
        /** @type {HTMLCanvasElement} */
        const canvas = document.getElementById('canvas')
        if (canvas.getContext) {
          const ctx = canvas.getContext('2d')
          // 圆形碰撞反弹
          function Ball(x, y, r, speedX, speedY, color) {
            // 设置属性
            this.x = x
            this.y = y
            this.r = r
            this.speedX = speedX
            this.speedY = speedY
            this.color = color
            // 设置方法
            this.draw = function () {
              ctx.beginPath()
              ctx.fillStyle = this.color
              ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
              ctx.fill()
            }
            this.move = function () {
              this.x += this.speedX
              if (this.x > canvas.width - this.r) {
                this.speedX *= -1
              } else if (this.x < this.r) {
                this.speedX *= -1
              }
              this.y += this.speedY
              if (this.y > canvas.height - this.r) {
                this.speedY *= -1
              } else if (this.y < this.r) {
                this.speedY *= -1
              }
            }
          }
          const ball = new Ball(100, 100, 50, 2, 2, 'blue')
          //1. 绘制图像
          ball.draw()
          //2. 删除图像 3. 更新图像 4. 绘制图像
          begin()
          function begin() {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ball.draw()
            ball.move()
            window.requestAnimationFrame(begin)
          }
        }
      }
    </script>
  </body>
</html>
